<template>
  <template v-if="isLongTerm">
    <el-input-number
      v-model="form.days"
      :min="0"
      :max="maxValues.days"
      controls-position="right"
      @change="updateFromDays"
    />
    <span>天</span>
    <el-input-number
      v-model="form.hours"
      controls-position="right"
      :min="0"
      :max="maxValues.hours"
      @change="updateFromHours"
    />
    <span>小时</span>
    <el-input-number
      v-model="form.minutes"
      controls-position="right"
      :min="0"
      :max="maxValues.minutes"
      @change="updateFromMinutes"
    />
    <span>分钟</span>
  </template>
  <template v-else>
    <el-input-number
      controls-position="right"
      v-model="form.times"
      :min="0"
      :max="maxValues.times"
      @change="updateFromTimes"
    />
    <span>次数</span>
  </template>
</template>

<script setup lang="ts">
// import { ref, watch } from 'vue'
interface Form {
  type: string
  reason: string
  days: number
  hours: number
  minutes: number
  times: number
  overdueDays: number
}
interface maxValuesType {
  days: number
  hours: number
  minutes: number
  times: number
}
defineProps<{
  isLongTerm: boolean
}>()
const form = defineModel<Form>({ required: true })
const maxValues = defineModel<maxValuesType>('maxValues', { required: true })
const updateFromDays = () => {
  if (form.value.days < 0) form.value.days = 0
  if (form.value.days < maxValues.value.days) {
    maxValues.value.hours = 23
    maxValues.value.minutes = 59
  }
}

const updateFromHours = () => {
  if (form.value.hours < 0) form.value.hours = 0
  if (form.value.hours < maxValues.value.hours) {
    maxValues.value.minutes = 59
  }
}

const updateFromMinutes = () => {
  if (form.value.minutes < 0) form.value.minutes = 0
}

const updateFromTimes = () => {
  if (form.value.times < 0) form.value.times = 0
}
// watch(days, updateFromDays)
// watch(hours, updateFromHours)
// watch(minutes, updateFromMinutes)
// watch(times, updateFromTimes)
</script>

<style scoped>
.el-input-number {
  width: 75px;
}
.el-input-number.is-controls-right + span {
  margin-right: 5px;
  margin-left: 5px;
}
</style>
